<template>
  <div>
    <a-config-provider>
      <a-table
        style="min-height: 230px"
        :scroll="scroll"
        :data-source="data"
        :rowKey="
          (record) => {
            return record.id || record.key;
          }
        "
        :loading="loading"
        :pagination="pagination"
        :expandedRowKeys="expandedRowKeys"
        @expand="handExpand"
        @change="handleChange"
        :row-selection="
          rowSelection
            ? {
                selectedRowKeys: selectedRowKeys,
                getCheckboxProps: getCheckboxProps,
                onChange: onSelectChange,
                onSelect: onSelect,
                onSelectAll: onSelectAll,
                type: typeStyle,
                columnTitle: columnTitle,
              }
            : null
        "
      >
        <!-- 有子表格的情况 -->
        <template #expandedRowRender="{ record }" v-if="showExpand">
          <slot name="slot1" :record="record" />
          <a-table
            :data-source="innerData"
            :pagination="innerPagination"
            @change="innerHandleChange"
            :loading="innerLoading"
          >
            <template v-for="innerCol in innerColumns">
              <a-table-column
                v-if="innerCol.slots"
                :key="innerCol.key"
                :title="innerCol.title"
                :data-index="innerCol.dataIndex"
                :sorter="innerCol.sorter"
                :align="innerCol.align ? innerCol.align : 'left'"
              >
                <template slot-scope="text, record, index">
                  <slot
                    :name="innerCol.slots.customRender"
                    :data="{ text, record, index }"
                  />
                </template>
              </a-table-column>
              <a-table-column
                v-else
                :key="innerCol.key"
                :title="innerCol.title"
                :ellipsis="innerCol.ellipsis"
                :width="innerCol.width"
                :data-index="innerCol.dataIndex"
                :sorter="innerCol.sorter"
                :align="innerCol.align ? innerCol.align : 'left'"
                :class="innerCol.wrap ? 'wrap' : ''"
              >
                <template slot-scope="text">
                  <a-tooltip
                    v-if="!innerCol.wrap"
                    :mouseEnterDelay="0.5"
                    placement="topLeft"
                    :title="text"
                  >
                    <span
                      :class="{ ellipsis: innerCol.ellipsis && !innerCol.wrap }"
                      >{{ text }}</span
                    >
                  </a-tooltip>
                  <span v-else>{{ text }}</span>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </template>
        <a-table-column
          v-if="isShowIndex"
          key="index"
          title="序号"
          :ellipsis="true"
          :width="60"
          data-index="index"
        >
          <template slot-scope="text, record, index">
            <a-tooltip
              placement="topLeft"
              :mouseEnterDelay="0.5"
              :title="
                ((pagination.current - 1) * pagination.pageSize || 0) +
                index +
                1
              "
            >
              <span>{{
                ((pagination.current - 1) * pagination.pageSize || 0) +
                index +
                1
              }}</span>
            </a-tooltip>
          </template>
        </a-table-column>

        <template v-for="col in columns">
          <a-table-column
            v-if="col.slots"
            :key="col.key"
            :title="col.title"
            :width="col.width"
            :fixed="col.fixed"
            :data-index="col.dataIndex"
            :sorter="col.sorter"
            :sortOrder="col.sortOrder"
            :align="col.align ? col.align : 'left'"
            :ellipsis="col.ellipsis"
          >
            <template slot-scope="text, record, index">
              <slot
                :name="col.slots.customRender"
                :data="{ text, record, index }"
                :columns="{
                  val: col.val,
                  dictList: col.dictList,
                  isCore: col.isCore,
                  fieldCode: col.fieldCode,
                  fieldType: col.fieldType,
                }"
              />
            </template>
          </a-table-column>
          <a-table-column
            v-else
            :key="col.key"
            :title="col.title"
            :ellipsis="col.ellipsis"
            :width="col.width"
            :fixed="col.fixed"
            :data-index="col.dataIndex"
            :sorter="col.sorter"
            :sortOrder="col.sortOrder"
            :align="col.align ? col.align : 'left'"
          >
            <template slot-scope="text">
              <a-tooltip
                :mouseEnterDelay="0.5"
                placement="topLeft"
                :title="text"
              >
                <span :class="{ ellipsis: col.ellipsis }">
                  {{ text || text === 0 ? text : "--" }}
                </span>
              </a-tooltip>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #renderEmpty>
        <div class="render-empty" style="text-align: center">
          <img src="/static/images/no-result.png" alt />
          <p style="color: #666">暂无数据</p>
        </div>
      </template>
    </a-config-provider>
  </div>
</template>
<script>
export default {
  props: {
    scroll: {
      type: Object,
      default: () => {
        return { x: false, y: false };
      },
    },
    typeStyle: {
      type: String,
      default: "checkbox",
    },
    columnTitle: {
      type: String,
      default: "",
    },
    showExpand: {
      type: Boolean,
      default: false,
    },
    expandedRowKeys: {
      type: Array,
      default: () => [],
    },
    isShowIndex: {
      type: Boolean,
      default: true,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    rowSelection: {
      type: Boolean,
      default: true,
    },
    pagination: {
      type: null,
      default: () => {
        return {
          total: 0,
          pageSize: 10,
          current: 1,
          pageSizeOptions: ["10", "20", "30", "40"],
        };
      },
    },
    innerPagination: {
      type: null,
      default: () => {
        return {
          total: 0,
          pageSize: 10,
          current: 1,
        };
      },
    },
  },
  data() {
    return {
      selectedRowKeys: [],
    };
  },
  methods: {
    getCheckboxProps(record) {
      return {
        props: {
          disabled: record.disabled === true,
          defaultChecked: record.selectedTag === 1,
        },
      };
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.$emit("changeSelect", selectedRowKeys);
      this.$emit("changeSelectedRows", selectedRows);
    },
    onSelect(record, selected, selectedRows) {
      this.$emit("onSelectRows", { record, selected, selectedRows });
    },
    onSelectAll(selected, selectedRows, changeRows) {
      this.$emit("onAllSelectRows", { selected, selectedRows, changeRows });
    },
    clearSelected() {
      this.selectedRowKeys = [];
      this.$emit("changeSelect", this.selectedRowKeys);
    },
    defaultSelectedKey(selectKey) {
      this.$emit("changeSelect", selectKey);
    },
    handExpand(expanded, record) {
      this.$emit("onExpand", expanded, record);
    },
    handleChange(pag, filters, sorter) {
      this.$emit("changeTable", pag, filters, sorter);
    },
    innerHandleChange(pag, filters, sorter) {
      this.$emit("innerChangeTable", pag, filters, sorter);
    },
  },
};
</script>
<style lang="less" scoped>
.render-empty {
  img {
    width: 140px;
  }
}
</style>
